<template>
  <QuillEditor
    v-bind="$attrs"
    theme="snow"
    content-type="html"
    placeholder=""
    :style="`height: ${props.height}px`"
    :content="props.content"
    @update:content="handleUpdateContent"
  />
</template>

<script setup lang="ts">
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const emits = defineEmits(['update:content'])

const props = withDefaults(
  defineProps<{
    content?: string
    height?: number
    readOnly?: boolean
  }>(),
  {
    content: '',
    height: 300,
    readOnly: false
  }
)

const handleUpdateContent = (val: any) => {
  emits('update:content', val)
}
</script>

<style lang="scss">
.ql-container {
  font-size: 14px;
}
.ql-snow {
  .ql-editor {
    line-height: normal !important;
  }
  .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
  }
  .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
  }

  .ql-picker.ql-size .ql-picker-label::before,
  .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
  .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
  }
  .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
  .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
  }
  .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
  .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
  }

  .ql-picker.ql-header .ql-picker-label::before,
  .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
  }
  .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
  .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
  }

  .ql-picker.ql-font .ql-picker-label::before,
  .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
  .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
  }
  .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
  .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
  }
}
</style>
